<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>订单管理</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="/after/css/bootstrap.min.css?v=3.4.0" rel="stylesheet">
    <link href="/after/css/font-awesome.min.css?v=4.3.0" rel="stylesheet">
    <link href="/after/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
    <link href="/after/css/animate.min.css" rel="stylesheet">
    <link href="/after/css/style.min.css?v=3.0.0" rel="stylesheet">

    <link href="/after/js/laypage/skin/laypage.css" rel="stylesheet">
    <!--引用vue的js-->
    <script src="/after/js/vue/vue.min.js"></script>
    <!--分页插件-->
    <script src="/after/js/laypage/laypage.js" charset="utf-8"></script>
    <script src="/after/js/layer/layer.js" charset="utf-8"></script>
</head>

<style>
    .button {
        background-color: #4CAF50; /* Green */
        border: none;
        color: white;
        padding: 10px 22px;
        text-align: center;
        text-decoration: none;
        display: inline-block;

        font-size: 14px;
        margin: 4px 2px;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
        cursor: pointer;
    }
    .button4 {
        background-color: white;
        color: #4CAF50;
        border: 2px solid #e7e7e7;
    }

    .button4:hover {background-color: #e7e7e7;}
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight" id="app">
    <br>
    <br>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <h2>订单管理</h2>
                <div class="ibox-title" id="bt">
                    <input type="text" id="order_list" name="order_list" placeholder="请输入订单编号"/>
                    <input type="button" value="搜索" onclick="getOrderPageList();"/><br>
                </div>
                <div class="ibox-content">
                    <table class="table table-striped table-bordered table-hover " id="editable">
                        <thead>
                        <tr>
                            <th>订单号</th>
                            <th>创建时间</th>
                            <th>收货人姓名</th>
                            <th>联系方式</th>
                            <th>收货地址</th>
                            <th>用户昵称</th>
                            <th>状态:
                                <select name="degree" id="degree" onchange="jumpMenu(this)">
                                    <option value="CzgTHOrder.ftl">退货</option>
                                    <option value="CzgYFOrder.ftl">已发货</option>
                                    <option value="CzgWFOrder.ftl">未发货</option>
                                    <option value="CzgSTOrder.ftl">申请退货</option>

                                    <option value="CzgWCOrder.ftl">完成</option>
                                </select></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="active" v-for="(item,index) in result">
                            <td>{{item.order_list}}</td>
                            <td>{{new Date(item.createTime).toLocaleString()}}</td>
                            <td>{{item.rname}}</td>
                            <td>{{item.phone}}</td>
                            <td>{{item.address}}</td>
                            <td>{{item.name}}</td>
                            <td>退货</td>
                        </tr>
                        </tbody>

                    </table>
                    <div id="pagenav"></div>
                    <div>
                        <button class="button button4" id="Exprot">ExportTable</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 全局js-->
<script src="/after/js/jquery-2.1.1.min.js"></script>
<script src="/after/js/bootstrap.min.js?v=3.4.0"></script>
<script src="/after/js/plugins/jeditable/jquery.jeditable.js"></script>
<!--查询-->
<script>
    function jumpMenu(e){
        window.location.href = e.value;//使用js执行跳转（window.location.href）
    }

    var app = new Vue({
        el: '#app',
        data: {
            result: []
        }
    });


    //查询用户数据
    var getOrderPageList = function (curr) {
        $.ajax({
            type: "post",
            dataType: "JSON",
            url: "/czgOrder/queryTHByPage.do",
            data: {
                pageNum: curr || 1,
                pageSize: 5,
                order_list: $("#order_list").val()
            },
            success: function (msg) {
                app.result = msg.page;
                laypage({
                    cont: 'pagenav', //容器。值支持id名、原生dom对象，jquery对象,
                    pages: msg.totalPage, //总页数
                    skin: '#FFFFFF',
                    first: '首页',
                    last: '尾页',
                    curr: curr || 1, //当前页

                    jump: function (obj, first) { //触发分页后的回调

                        if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr

                            getOrderPageList(obj.curr);
                        }
                    }
                });


            }
        });
    }

    getOrderPageList();

    //查询用户事件

    $('#findOrder').on('click', function () {
        getOrderPageList();
    });


    //导出表格
    $("#Exprot").on("click",function () {
        ExportTable();
    })

    var ExportTable=function(){
        //导出excel表不能用ajax
        //alert(app.result);
        var OrderList=JSON.stringify(app.result);
        location.href="/FileExprot/export.do?OrderList="+OrderList;
    }

</script>


</body>
</html>